<template>
  <view class="request-post-container">
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator
        style="position: absolute;top: 50%;transform: translateY(-50%);left: 20px;font-size: 16px;line-height: 16px;color: #000;"
        class="iconfont" hover-class="none" open-type="navigateBack">&#xe61a;</navigator>
      <view class="top-title-bar">
        选择投递
      </view>
    </navigation-bar>
    <scroll-view class="main-request-post-wrappar"
      :style="{height: `calc(100% - ${statusbarHeight}px - ${bar_topHeight}px - 130rpx)`}" :scroll-y="true"
      :scroll-top="scrollTop">
      <!-- 上方标题 -->
      <view class="title-box">
        <view class="left-icon iconfont">
          &#xe8ad;
        </view>
        <view class="follow-title">
          我的可投递内容（二手闲置）
        </view>
      </view>
      <!-- 投递内容 -->
      <view class="sub-post-content">
        <view class="post-text">
          <text>淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。</text>
        </view>
        <view class="post-img">
          <image class="img" src="@/static/post-cover3.png" mode="aspectFit"></image>
        </view>
      </view>
      <!-- 选择投递 -->
      <view class="request-info-box">
        <view class="request-option-hd">
          <view class="note-title">
            添加备注：
          </view>
          <view class="checkbox" @click="onConfirmCheck">
            <view class="name">选择投递</view>
            <view class="check-dot" v-if="!isChecked"></view>
            <view class="checked-dot" v-else>
              <view class="icon iconfont">
                &#xe60c;
              </view>
            </view>
          </view>
        </view>
        <view class="request-note-bd" v-show="isChecked">
          <input class="inner-ipt" :maxlength="50" :adjust-position="false" :always-embed="true"
            placeholder="添加您的备注，让他更加了解您的商品。" placeholder-style="color: #0000004D;" type="text" @focus="onInputFocus"
            @blur="onInputBlur">
        </view>
      </view>
      <view class="keyboard-jack-box" :style="{height: keyBoardHeight + 'px'}"></view>
    </scroll-view>
    <!-- 底部确认投递面板 -->
    <view class="bottom-confirm-panel" :style="{'padding-bottom': bangs_Height + 'px'}">
      <view class="left-tip">
        可选（{{checkedCount}}/1）
      </view>
      <navigator hover-class="none" open-type="navigateBack" url="/thirdpkg/post-detail/post-detail"
        class="right-btn-wrap">
        投递
      </navigator>
    </view>
  </view>
</template>

<script>
  import naviHeightMix from "@/mixins/get-NavigationBar_Height.js"
  import {
    mapState
  } from "vuex";
  export default {
    mixins: [naviHeightMix],
    computed: {
      ...mapState("m_app", ["bangs_Height"])
    },
    data() {
      return {
        isChecked: false, //是否选中
        checkedCount: 0, //选中个数
        scrollTop: 0, //滚动距离
        keyBoardHeight: 0, //键盘高度
      }
    },
    onUnload() {
      uni.$emit('requestSucc')
    },
    methods: {
      // 勾选选择投递
      onConfirmCheck: function() {
        if (this.isChecked === true) {
          this.isChecked = false
          this.checkedCount--
        } else {
          this.isChecked = true
          this.checkedCount++
        }
      },
      // 输入框聚焦
      onInputFocus: function(e) {
        if (e.mp.detail.height) {
          this.keyBoardHeight = e.mp.detail.height
          setTimeout(() => {
            this.scrollTop = 999
          }, 1)
        }
      },
      // 输入框失焦
      onInputBlur: function(e) {
        this.keyBoardHeight = e.mp.detail.height
        setTimeout(() => {
          this.scrollTop = 0
        }, 1)
      }
    }
  }
</script>

<style lang="scss">
  .request-post-container {
    height: 100%;

    .top-title-bar {}

    .main-request-post-wrappar {
      width: 100%;
      box-sizing: border-box;
      padding: 0 40rpx;

      .title-box {
        display: flex;
        align-items: center;
        height: 64rpx;
        padding-top: 60rpx;

        .left-icon {
          color: #EA2D48;
          font-size: 64rpx;
          line-height: 64rpx;
          margin-right: 20rpx;
        }

        .follow-title {
          font-size: 36rpx;
          font-weight: 600;
        }
      }

      .sub-post-content {
        padding-top: 60rpx;

        .post-text {
          font-size: 24rpx;
        }

        .post-img {
          .img {
            width: 100%;
            height: 400rpx;
            margin-top: 10rpx;
          }
        }
      }

      .request-info-box {
        overflow: hidden;
        margin-top: 40rpx;

        .request-option-hd {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 50rpx;
          z-index: 1;

          .note-title {
            font-size: 32rpx;
          }

          .checkbox {
            display: flex;
            align-items: center;
            height: 50rpx;

            .name {
              font-size: 32rpx;
              margin-right: 30rpx;
            }

            .check-dot,
            .checked-dot {
              overflow: hidden;
              box-sizing: border-box;
              width: 32rpx;
              height: 32rpx;
              border-radius: 20rpx;
              border: 4rpx solid #000;
            }

            .checked-dot {
              position: relative;

              .icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-53%, -50%);
                color: #000;
                font-size: 32rpx;
                font-weight: 800;
                line-height: 32rpx;
              }
            }
          }
        }

        .request-note-bd {
          padding-top: 50rpx;

          .inner-ipt {
            width: 100%;
            padding-bottom: 20rpx;
            height: 50rpx;
            font-size: 32rpx;
            z-index: 1;
          }
        }
      }

      .keyboard-jack-box {
        width: 100%;
      }
    }

    .bottom-confirm-panel {
      position: fixed;
      bottom: 0;
      width: calc(100% - 60rpx);
      height: 130rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 30rpx;
      padding-right: 30rpx;
      background-color: #FFF;

      .left-tip {
        font-size: 36rpx;
      }

      .right-btn-wrap {
        width: 140rpx;
        height: 60rpx;
        background-color: #000;
        border-radius: 40rpx;
        color: #FFF;
        font-size: 28rpx;
        line-height: 60rpx;
        text-align: center;
      }
    }
  }
</style>